<script type="text/javascript">
var i = 0;
var flipside =  0; 
$(document).ready(function() {

  $('#choose_region').hover(
    function() 
    {
      if(flipside == 0)
      {
    	  $(this).flip({
  	  		direction:'tb',
  	  		speed:200,
  	  		color: '#659901',
  	  		content:$("#choose_region #back_region"),
  	  		onEnd: checkflip
  	  	  })
      }
    }
  );

  $('#choose_region').mouseout(
		    function() 
		    {
		      if(flipside == 1)
		      {
		    	  $(this).revertFlip({		    	  		
		      	  		onEnd: checkflip
		      	  });
			    	  
		      }
		    }
		  );

  
  function checkflip() 
  {
	  if (flipside == 0) 
	  {
	     flipside = 1;
	  } 
	  else
	  {
	     flipside = 0;         
	  }
  }

     	
});


</script>

<div id="tour_page" class="list">
		
<!-- 	CHOOSE REGION PANEL	- CREATE HELPER/COMPONENT -->
	<div id="choose_region">
	
		<div class="front">
			
			<span>Choose your Region</span>
		</div>
		
		<div id="back_region">
			<div class="back">
			 	<span>Seleted Region(s)</span>
			</div>
		</div>
		
	</div>	
		
	
<!-- 	SORT AND FILTER	- CREATE HELPER/COMPONENT-->
		
	<div id="list_options">
	
		<div class="sort">
			<ul>
				<li class="active"><a>Newest</a></li>
				<li><a>Popular</a></li>
				<li><a>Best Choice</a></li>
			</ul>
		</div>
		
		<div class="filter">
			<a>destination</a>
			<a>length</a>
<!-- 			<ul class="destination"> -->
<!-- 				<li>Ho Chi Minh</li> -->
<!-- 				<li>Ha noi</li> -->
<!-- 				<li>Da nang</li> -->
<!-- 			</ul> -->
			
			
<!-- 			<ul class="length">			 -->
<!-- 				<li>Ho Chi Minh</li> -->
<!-- 				<li>Ha noi</li> -->
<!-- 				<li>Da nang</li> -->
<!-- 			</ul> -->
			
		</div>

	</div>	
	
	<div id="tour_list">
	
		<!-- 	FAKE LIST FOR DESIGN	 -->
		<a class="tour_item" title="Go to the official website of blabla" href="http://gameweb.starseed.fr" target="_blank">
			<span class="left">
				<span class="image"><img src="/files/images/partner/thumbs/300x200_03.jpg"/></span>				
			</span>
			<span class="right">			
				<span class="title">Hoi An Resort</span>
				<span class="subtitle">Half day</span>
				<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.</span>
				<span class="more">				
					<span class="line"></span>
					<span class="link">> More details</span>
				</span>			
			</span>
		</a>
		
		<a class="tour_item" title="Go to the official website of blabla" href="http://gameweb.starseed.fr" target="_blank">
			<span class="left">
				<span class="image"><img src="/files/images/partner/thumbs/300x200_03.jpg"/></span>				
			</span>
			<span class="right">			
				<span class="title">Sunsea Resort</span>
				<span class="subtitle">4 days</span>
				<span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.</span>
				<span class="more">				
					<span class="line"></span>
					<span class="link">> More details</span>
				</span>			
			</span>
		</a>
		
		
	</div>	

	
<!-- 	 <canvas width="1280" height="720" id="pageCanvas"> -->
<!--         You do not have a canvas enabled browser -->
<!--     </canvas> -->
    <script>
        var context = document.getElementById('pageCanvas').getContext('2d');
        var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }

        function drawRandomlyColoredRectangle() {  
            <!-- clear the drawing surface -->
            context.clearRect(0,0,1280,720);
            <!-- you can also stroke a rect, the operations need to happen in order -->
            incrementAngle();
            context.save();                
            context.lineWidth = 10;  
            context.translate(200,200);
            context.rotate(convertToRadians(angle));
            <!-- set the fill style -->
            context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            context.fillRect(-25,-25,50,50);
            context.strokeRect(-25,-25,50,50);                
            context.restore();
        }

        setInterval(drawRandomlyColoredRectangle, 20);
    </script>
	
</div>
